<template>
	<view>
		<navBar title="欠费记录"></navBar>
		<view class="top-bg"></view>
		<view class="content">
			<!-- <view class="select-btn" @click="open">
				<text>收款组织名称</text>
				<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
			</view> -->
			<view v-if="list.length">
				<view class="car-no-panel" v-for="item in renderList" :key="item.id">
					<view class="title">
						<view class="title-left">
							<!-- <image @click="handleToggleSelectItem(item)" class="icon-check"
								v-show="!checkedList.includes(item.id)" :src="bg_image.iconCheck"></image>
							<image @click="handleToggleSelectItem(item)" class="icon-check"
								v-show="checkedList.includes(item.id)" :src="bg_image.iconCheckActive"></image> -->
							<image class="icon-car" :src="bg_image.iconCar"></image>
							<text class="car-no-title">{{item.plateNumber || ''}}</text>
						</view>
						<text
							:class="{'status-red':item.statusStr==='欠费中','status-blue':item.statusStr==='停车中'}">{{item.statusStr || ''}}</text>
					</view>
					<view class="car-info" @click="go('/pages/indoor/parkingDetails',item)">
						<view class="line between">
							<view v-if="item.indoor">
								<text>车场名称：</text>
								<text class="blue">{{item.parkName || ''}}</text>
							</view>
							<view v-else>
								<text>泊位编号：</text>
								<text class="blue">{{item.parkName || ''}}</text>
							</view>
							<view class="price">
								<text class="price-tip">应付：</text>
								<text>¥{{item.actualAmount || 0}}</text>
							</view>
						</view>
						<view class="line">
							<text>驶入时间：</text>
							<text>{{item.enterTime || ''}}</text>
						</view>
						<view class="line between">
							<view>
								<text>停车时长：</text>
								<text>{{item.durationStr || ''}}</text>
							</view>
							<view class="pay-btn">待支付</view>
						</view>
					</view>
				</view>
			</view>
			<view class="page-result" v-else>
				<image class="page-result-icon" :src="bg_image.emptyData"></image>
				<view class="page-result-msg">暂无数据</view>
			</view>
		</view>
		<view class="footer-tool">
			<view class="left">
				<!-- <image @click="handleToggleSelectAll" class="icon-check" v-if="checkedList.length===list.length"
					:src="bg_image.iconCheckActive"></image>
				<image @click="handleToggleSelectAll" class="icon-check" v-else :src="bg_image.iconCheck">
				</image> -->
				<!-- <text class="text1">全选</text> -->
				<text class="text2">合计:￥{{totalPrice || 0}}</text>
			</view>
			<view class="right" @click="patchPay">
				批量缴费
			</view>
		</view>
		<u-popup
		:border-radius="22"
		mode="bottom" v-model="showOverlay">
			<view class="popup-list">
				<view class="tool">
					<text class="cancel" @click="handleCancel">取消</text>
					<text class="confirm" @click="handleConfirm">确认</text>
				</view>
				<view class="popup-list-item" v-for="item in departmentList" :key="item.id"
					@click="handleSelectDepartment(item)">
					{{item}}
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import arrears from './js/arrears'
	
	export default {
		components: {
		   
		},
		...arrears 
	}
</script>

<style lang="less" scoped>
	@import url('./css/arrears.less');
</style>